<template>
    <div class="stu-div">
        <div class="banner-div">
            <div class="stu-point">
                <div class="point-div">
                    <div class="point-top">
                        <div class="point-item orange">
                            <div class="item-li">
                                <span class="my-item">{{ myclass }}</span>
                                <span>/</span>
                                <span class="all-item">{{ allclass }}</span>
                            </div>
                            <div class="item-title">我的课程</div>
                        </div>
                        <div class="point-item puper">
                            <div class="item-li">
                                <span class="my-item">{{ mypoint }}</span>
                                <span>/</span>
                                <span class="all-item">{{ knowpoint }}</span>
                            </div>
                            <div class="item-title">知识点</div>
                        </div>
                        <div class="point-item yellow">
                            <div class="item-li">
                                <span class="my-item">{{ mytimes }}</span>
                                <span>/</span>
                                <span class="all-item">{{ alltimes }}</span>
                            </div>
                            <div class="item-title">学习时间</div>
                        </div>
                    </div>
                    <div class="record-box">
                        <div class="record-tit">学习记录</div>
                        <div class="record-tab" v-for="(item,index) in list" :key="index">
                            <div class="left">学习记录内容占位学习记录内容占位学习记录内容占位学习记录内容占位</div>
                            <div class="right">2025.02.25  22:06:23</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="class-info">
            <div class="class-title">全部课程</div>
            <div class="class-box">
                <div class="card-box" v-for="(item,index) in list" :key="index">
                    <div class="card-top-box">
                        <div class="left">
                            <img src="@/assets/class.png" alt="">
                            <span>必修课</span>
                        </div>
                    </div>
                    <div class="class-info-box">
                        <div class="left">
                            <div class="title">产品结构设计基础</div>
                            <div class="sub-title">机械工程学院</div>
                            <div class="teacher">刘老师</div>
                        </div>
                        <div class="right">
                            <img src="@/assets/class-icon.png" alt="">
                        </div>
                    </div>
                    <div class="tages">
                        <span class="blue">专业基础课</span>
                        <span class="green">章节式教学</span>
                    </div>
                    <el-divider />
                    <div class="knowledge-box">
                        <div class="knowledge">
                            <span>知识点</span>
                            <div class="nums">
                                <img src="@/assets/fonts/blue/2.png" alt="">
                                <img src="@/assets/fonts/blue/3.png" alt="">
                            </div>
                        </div>
                        <div class="knowledge">
                            <span>知识点</span>
                            <div class="nums">
                                <img src="@/assets/fonts/blue/2.png" alt="">
                                <img src="@/assets/fonts/blue/3.png" alt="">
                            </div>
                        </div>
                        <div class="knowledge">
                            <span>知识点</span>
                            <div class="nums">
                                <img src="@/assets/fonts/blue/2.png" alt="">
                                <img src="@/assets/fonts/blue/3.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    const myclass    =  ref(0);
    const allclass   =  ref(10);
    const mypoint    =  ref(123);
    const knowpoint  =  ref(235);
    const mytimes    =  ref(0);
    const alltimes   =  ref(3);
    const list       =  ref([0,1,2]);
</script>
<style scoped>
    .banner-div{width: 100%;height: 850px;background: url(@/assets/stu-bg.png);background-size: 100% 100%;display: flex;align-items: center;justify-content: center;}
    .banner-div .stu-point{width: 580px;height: 350px;background: #3D61F7;border-radius: 20px;position: relative;}
    .banner-div .stu-point .point-div{width: 568px;height: 350px;background: #fff;border-radius: 20px;position: absolute;left: 6px;}
    .point-div .point-top{display: flex;flex-direction: row;justify-content: space-between;margin: 30px auto;width: 90%;}
    .point-div .point-item{padding: 20px 40px 20px 40px;border-radius: 10px;cursor: pointer;}
    .point-div .point-item .item-li .all-item{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 400;padding-left: 3px; }
    .point-div .point-item .item-li .my-item{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 30px;font-weight: 600;padding-right: 3px; }
    .point-div .point-item .item-title{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;margin-top: 10px; }
    .orange{background: #FEE9E9;}
    .puper{background: #F2F0FE;}
    .yellow{background: #FFF9E9;}
    .record-box{height: 45%;width: 90%;margin: 20px auto;background: #E3F2FF;border-radius: 10px;}
    .record-box .record-tit{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 18px;font-weight: 600;padding: 10px;text-align: left; }
    .record-box .record-tab{ display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 10px; }
    .record-box .record-tab .left{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;width: 60%; padding-left: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px; }
    .record-box .record-tab .right{ padding-right: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px; }
    .class-info{padding: 50px 0 50px 0;}
    .class-info .class-title{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 22px;font-weight: 600; }
    .class-box{display: flex;flex-direction: row;justify-content: center;}
    .card-box{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);border-radius: 10px;min-width: 270px;min-height: 250px; cursor: pointer; margin: 1%; max-width: 18%;border: 1px solid #fff; flex: 1 0 calc(18% - 5px); }
    .class-info .card-box:hover{border: 1px solid #2D7BF3;box-shadow: 0px 0px 10px 0px rgba(5,87,213,0.2);}
    .card-box .card-top-box{display: flex;flex-direction: row;justify-content: space-between;}
    .card-box .card-top-box .left{display: flex;flex-direction: row;position: relative;}
    .card-box .card-top-box .left img{width: 90px;height: 25px;}
    .card-box .card-top-box .left span{color: #fff;position: absolute;left: 0;top: 0;text-align: center;width: 90px;font-size: 14px;line-height: 25px;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .class-info-box{display: flex;flex-direction: row;justify-content: space-between;margin-top: 20px;}
    .class-info-box .left{padding-left: 40px;text-align: left;}
    .class-info-box .left .title{font-size: 16px;font-weight: 600;color: #000;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .class-info-box .left .sub-title,.teacher{font-size: 14px;font-weight: 400;color: #747474;font-family: 微软雅黑, Microsoft YaHei, SimSun;margin-top: 10px;}
    .class-info-box .right{padding-right: 40px;}
    .class-info-box .right img{width: 100px;height: 100px;}
    .tages{display: flex;flex-direction: row;justify-content: start;margin-left: 20px;}
    .tages span{display: block;width: 80px;height: 25px;border-radius: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;line-height: 25px;margin-left: 10px;cursor: pointer;}
    .blue{color: #3869E7;border: 1px solid #3869E7;background: rgba(56,105,231,0.2);}
    .green{color: #217F10;border: 1px solid #5ACA45;background: rgba(90,202,69,0.2);}
    .knowledge-box{display: flex;flex-direction: row;justify-content: space-around;padding-bottom: 10px;margin-top: -10px;}
    .knowledge .nums{display: flex;align-items: center;margin-top: 5px;}
    .knowledge .nums img{width: 20px;}
    @media (max-width: 1920px) { .banner-div { height: 700px; } }
</style>